<div class="main-wrapper" id="scroller">
<div class="demo-layer bug-wrapper">
    <!-- <div class="tips">
        本分类不具任何权威性，欢迎指正
    </div> -->
    <h3 class="item-title">BUG</h3>
    <p class="item-tips text-wrap">bug在什么地方？页面</p>
    <div class="item-tips text-wrap">
        页面有什么？
        <p>页面 = 视图（UI） + 数据流</p>
    </div>
    <img width="47%" class="pl30" src="../../../../images/yemian.png" >
    <div class="item-block text-wrap">
        <p class="p-level">
            DOM
            <label>
                <label>颜色</label>
                <label>大小【长宽高】</label>
                <label>形状</label>
                <label>内容</label>
                <label>位置【相对|绝对】</label>
                <label>...</label>
            </label>
        </p>
        
        <div class="pt20">
            问题
                <p class="pl30">css兼容性问题：flex、animation、transform、fixed、box-sizing ... </p>
                <p class="pl30">内容边界问题： 空、过长 ...</p>
        </div>
    </div>
    <div class="item-block text-wrap">
        <p class="p-level">
            数据流
            <label>
                <label>源</label>
                <label>数据结构</label>
                <label>获取方式</label>
                <label>算法【排序、转换...】</label>
                <label>...</label>
            </label>
        </p>
        
        <div class="pt20">
            问题
                <p class="pl30">获取：异步流程错误监控</p>
                <p class="pl30">内容边界问题： 空指针、数据格式不对、特殊字符 ...</p>
        </div>
        <!-- <div class="example">
            图片上传
            <p>可以选择多张图片 + 后端接口只能一张一张上传</p>
        </div> -->
    </div>

    <h3 class="item-title">重点bug说明</h3>

    <div class="b-title">原生键盘</div>
    <img width="47%" class="pl30" src="../../../../images/k.png" >
    <div class="item-block text-wrap">
        <p>V: webview的可视区域高度；</p>
        <p>K: keyboard, 键盘高度；</p>
        <p>P: 页面高度。</p>
        <p>android: 弹起原生键盘，webview高度发生变化</p>
        <p>ios: 弹起键盘，webview高度没变，整个被键盘顶起</p>
    </div>
    <img width="47%" class="pl30" src="../../../../images/message-k.png" >
    <div class="item-block text-wrap">
        <div class="k-question">
            1. 前几条消息被遮挡的问题
            <p>方案一，当键盘弹起，且消息少于x条时，设置消息容器的margin-top </p>
            <p>方案二，占据顶部位置: 借鉴其他类似产品，用户首次进入页面，发送几条欢迎消息</p>
        </div>
        <div class="k-question">
            1. input输入框被遮挡的问题
            <p>输入框focus时轮询设置window.scrollTo，将页面滚动到底部</p>
        </div>
    </div>

    <div class="b-title">UI渲染卡顿</div>
    <img width="47%" class="pl30" src="../../../../images/browser.png" >
    <div class="item-block text-wrap">
        <div class="k-question">
            UI渲染卡顿 - 中断：
            <p>点击发送，消息发送出去，页面没有任何响应</p>
            <p>下拉历史消息，中断</p>
            <p>dom元素只渲染一部分</p>
            <p>...</p>
        </div>
        <div class="k-question">
            遇到屎上极大问题：
            <p>不知道为什么？</p>
        </div>
        <div class="k-question">
            原因：
            <p>没有做性能分析</p>
        </div>
    </div>

    <div class="b-title">
        做性能分析的基础？
        <p>1. 浏览器工作原理</p>
        <p>2. 系统资源理论</p>
    </div>
    <img width="53%" style="margin-left: -.2rem;" class="pl30" src="../../../../images/ziyuan.png" >
    <div class="item-block text-wrap">
        <!-- <p>CPU是多核的吗？</p> -->
        <p>计算量最大估值有吗？</p>
        <p>是内存读的问题？</p>
        <p>是内存写的问题？</p>
        <p>是GPU使用不当的问题？</p>
    </div>
    <img width="47%" class="pl30" src="../../../../images/xianchen.png" >
    <div class="item-block text-wrap">
        <div class="k-question">
            后期计划
            <p>加强性能分析能力：系统结构知识 + 浏览器工作原理 + 工具使用</p>
            <p>不断分析优化代码</p>
            <p>
                跟进大象sdk部分
                <label>舍弃本地存储的方案</label>
                <label>尝试将计算量大的工作迁移到webworker</label>
                <label>滚动的UI线程和IO线程会互相竞争，待解决</label>
                <label>性能报告</label>
            </p>
           
        </div>
    </div>
    <!-- <h3 class="item-title">风之叶</h3>
    <p class="item-tips text-wrap">第七空间，有一种特殊的物质，可以悬浮于空中，房子、道路、衣服等都可以用其创造出来</p>
    <div class="item-block text-wrap">
        <p class="p-level">
            公式
            <label>中央管理器 M</label>
            <label>叶子 * n + M = 组子</label>
            <label>组子 * n + M = 风之叶【eg：房子】</label>
            <p class="item-tips tips-black">M，保存叶子属性数据，控制数据流动；<br>
            叶子，可以理解成dom元素，基础成分；<br>
            组子，可以理解成组件；<br>
            风之叶，可以理解成页面；<br>
            n >= 1； </p>
        </p>
    </div>
    <div class="item-block text-wrap">
        <p class="p-level">
            叶子
            <label>
                属性：
                <label>颜色</label>
                <label>大小【长宽高】</label>
                <label>形状</label>
                <label>内容</label>
                <label>位置【相对|绝对】</label>
                <label>...</label>
            </label>
        </p>
        
        <p>
            dom元素：外貌
            css3兼容性相关
            http://www.cnblogs.com/jesse131/p/5441199.html
        </p>
    </div> -->

</div>
</div>